<script setup>
import { ref } from 'vue'
defineOptions({
  name: 'MapParking'
})

const props = defineProps({
  //标签
  label: {
    type: Array,
    default: () => []
  },
  //数据
  data: {
    type: Array,
    default: () => []
  },
  //分页信息
  pageInfo: {
    type: Object,
    default: () => ({
      total: 0,
      page: 1,
      size: 10
    })
  },
  //是否展示分页条
  pageDisabled: {
    type: Boolean,
    default: false
  },
  //左边自定义
  slotLeft: {
    type: Boolean,
    default: false
  },
  //多选
  multipleSelect: {
    type: Boolean,
    default: true
  },
  //展示编辑按钮
  editShow: {
    type: Boolean,
    default: true
  },
  //展示图片信息
  editImgUrl: {
    type: Boolean,
    default: false
  },
  //高度
  height: {
    type: String,
    default: '100%'
  },
  //是否展示header
  showHeader: {
    type: Boolean,
    default: true
  },
  operation: {
    type: Boolean,
    default: false
  },
  showPage: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['changePage', 'deleteList', 'dialogShow', 'edit', 'editImage'])
const handleSizeChange = (size) => {
  emit('changePage', props.pageInfo.page, size)
}
const handleCurrentChange = (page) => {
  emit('changePage', page, props.pageInfo.size)
}
const selectionList = ref([])
const handleSelectionChange = (selection) => {
  selectionList.value = selection
}
const deleteList = (id) => {
  // selectionList.value.map((e) => {
  //   console.log(e.id);
  // })
  let list = []
  if (id != null) {
    list = [id]
  } else {
    console.log(1)
    list = selectionList.value.map((e) => e.id)
  }
  emit('deleteList', list)
}
const showDialog = ref(false)
const handleAdd = () => {
  emit('dialogShow')
}
const close = () => {
  showDialog.value = false
}
const edit = (e) => {
  emit('edit', e)
}
const editImage = (id) => {
  emit('editImage', id)
}

{
  props
}
import {
  DeleteFilled,
  CirclePlusFilled,
  Edit,
  Delete,
  PictureFilled
} from '@element-plus/icons-vue'
</script>

<template>
  <el-container style="height: 100%">
    <el-header v-if="showHeader" height="40px">
      <el-row :gutter="20">
        <el-col :span="15" v-if="!slotLeft">
          <el-button v-if="!slotLeft" type="success" :icon="CirclePlusFilled" @click="handleAdd"
            >新增</el-button
          >
          <el-button type="danger" :icon="DeleteFilled" @click="deleteList()">批量删除</el-button>
        </el-col>
        <el-col :span="15" v-if="slotLeft">
          <slot name="left"></slot>
        </el-col>
        <el-col :span="4">
          <slot name="select"></slot>
        </el-col>
        <el-col :span="5" style="text-align: right">
          <slot name="right"></slot>
        </el-col>
      </el-row>
    </el-header>
    <el-main>
      <el-table height="100%" border stripe :data="data" @selection-change="handleSelectionChange">
        <!-- 空状态 -->
        <template #empty>
          <el-empty style="width: 100%; height: 100%" description="暂无数据" />
        </template>
        <!-- 多选 -->
        <el-table-column v-if="multipleSelect" type="selection" width="55"> </el-table-column>
        <el-table-column
          v-for="(item, index) in label"
          :key="index"
          :label="item.label"
          :width="item.width ?? ''"
        >
          <template #default="scope">
            <slot v-if="item.slotName" :name="item.slotName" :data="scope.row"></slot>
            <div v-else>{{ scope.row[item.prop] }}</div>
          </template>
        </el-table-column>
        <!-- 操作 -->
        <el-table-column v-if="operation" width="150" label="操作">
          <template #default="scope">
            <el-button v-if="editImgUrl" type="primary" circle @click="editImage(scope.row.id)"
              ><el-icon> <PictureFilled /> </el-icon
            ></el-button>
            <el-button
              v-if="editShow"
              type="primary"
              :icon="Edit"
              circle
              @click="edit(scope.row)"
            />
            <el-popconfirm title="确认删除吗" @confirm="deleteList(scope.row.id)">
              <template #reference>
                <el-button type="danger" :icon="Delete" circle />
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
    </el-main>
    <!-- 分页 -->
    <el-footer v-if="showPage">
      <div class="footer">
        <el-pagination
          :current-page="pageInfo.page"
          :page-size="pageInfo.size"
          :page-sizes="[5, 10, 20, 30, 40]"
          :disabled="pageDisabled"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pageInfo.total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        />
      </div>
    </el-footer>
  </el-container>
</template>
<style lang="scss" scoped>
:deep(.cell) {
  text-align: center;
}

.footer {
  width: 100%;
  display: flex;
  height: 100%;
  justify-content: center;
  align-items: center;
}
</style>
